<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Animations: Warps</title>
    <meta name="description" content="Animations: Warps - A-Frame">
    <script src="../../../dist/aframe.js"></script>
  </head>
  <body>
    <a-scene>
      <!-- A series of cylinders that scale in succession to create "warp" animations -->

      <!-- Warps 1 -->

      <a-entity position="-2 1.5 -2">

        <!-- Green -->
        <a-entity>
          <a-animation attribute="scale" from="1 0 1" to="1 1 1" dur="2000" fill="both"></a-animation>
          <a-cylinder position="0 2 0" radius="2" height="2" color="#7BC8A4" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 1.25 1" to="1 0 1" dur="2000" fill="both"></a-animation>
          </a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#7BC8A4" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 1.25 1" to="1 0 1" dur="2000" fill="both"></a-animation>
          </a-cylinder>
        </a-entity>

        <!-- Orange -->
        <a-entity>
          <a-animation attribute="scale" from="0.9 0 0.9" to="0.9 1 0.9" begin="200" dur="2000" fill="both"></a-animation>
          <a-cylinder position="0 2 0" radius="2" height="2" color="#F16745" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 1.25 1" to="1 0 1" begin="200" dur="2000" fill="both"></a-animation>
          </a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#F16745" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 1.25 1" to="1 0 1" begin="200" dur="2000" fill="both"></a-animation>
          </a-cylinder>
        </a-entity>

        <!-- Blue -->
        <a-entity>
          <a-animation attribute="scale" from="0.8 0 0.8" to="0.8 1 0.8" begin="400" dur="2000" fill="both"></a-animation>
          <a-cylinder position="0 2 0" radius="2" height="2" color="#4CC3D9" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 1.25 1" to="1 0 1" begin="400" dur="2000" fill="both"></a-animation>
          </a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#4CC3D9" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 1.25 1" to="1 0 1" begin="400" dur="2000" fill="both"></a-animation>
          </a-cylinder>
        </a-entity>

        <!-- Yellow -->
        <a-entity>
          <a-animation attribute="scale" from="0.7 0 0.7" to="0.7 1 0.7" begin="600" dur="2000" fill="both"></a-animation>
          <a-cylinder position="0 2 0" radius="2" height="2" color="#FFC65D" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 1.25 1" to="1 0 1" begin="600" dur="2000" fill="both"></a-animation>
          </a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#FFC65D" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 1.25 1" to="1 0 1" begin="600" dur="2000" fill="both"></a-animation>
          </a-cylinder>
        </a-entity>

        <!-- Purple -->
        <a-entity>
          <a-animation attribute="scale" from="0.6 0 0.6" to="0.6 1 0.6" begin="800" dur="2000" fill="both"></a-animation>
          <a-cylinder position="0 2 0" radius="2" height="2" color="#93648D" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 1.25 1" to="1 0 1" begin="800" dur="2000" fill="both"></a-animation>
          </a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#93648D" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 1.25 1" to="1 0 1" begin="800" dur="2000" fill="both"></a-animation>
          </a-cylinder>
        </a-entity>

      </a-entity>



      <!-- Warps 2 -->

      <a-entity position="2 1.5 -2">
        <a-animation attribute="scale" from="0 1 0" to="1 1 1" begin="1000" dur="2000" fill="both"></a-animation>

        <!-- Green -->
        <a-entity>
          <a-animation attribute="scale" from="1 0 1" to="1 1 1" dur="2000" fill="both"></a-animation>
          <a-cylinder position="0 2 0" radius="2" height="2" color="#7BC8A4" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 40 1" to="1 0 1" dur="2000" fill="both"></a-animation>
          </a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#7BC8A4" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 40 1" to="1 0 1" dur="2000" fill="both"></a-animation>
          </a-cylinder>
        </a-entity>

        <!-- Orange -->
        <a-entity>
          <a-animation attribute="scale" from="0.9 0 0.9" to="0.9 1 0.9" begin="200" dur="2000" fill="both"></a-animation>
          <a-cylinder position="0 2 0" radius="2" height="2" color="#F16745" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 40 1" to="1 0 1" begin="200" dur="2000" fill="both"></a-animation>
          </a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#F16745" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 40 1" to="1 0 1" begin="200" dur="2000" fill="both"></a-animation>
          </a-cylinder>
        </a-entity>

        <!-- Blue -->
        <a-entity>
          <a-animation attribute="scale" from="0.8 0 0.8" to="0.8 1 0.8" begin="400" dur="2000" fill="both"></a-animation>
          <a-cylinder position="0 2 0" radius="2" height="2" color="#4CC3D9" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 40 1" to="1 0 1" begin="400" dur="2000" fill="both"></a-animation>
          </a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#4CC3D9" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 40 1" to="1 0 1" begin="400" dur="2000" fill="both"></a-animation>
          </a-cylinder>
        </a-entity>

        <!-- Yellow -->
        <a-entity>
          <a-animation attribute="scale" from="0.7 0 0.7" to="0.7 1 0.7" begin="600" dur="2000" fill="both"></a-animation>
          <a-cylinder position="0 2 0" radius="2" height="2" color="#FFC65D" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 40 1" to="1 0 1" begin="600" dur="2000" fill="both"></a-animation>
          </a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#FFC65D" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 40 1" to="1 0 1" begin="600" dur="2000" fill="both"></a-animation>
          </a-cylinder>
        </a-entity>

        <!-- Purple -->
        <a-entity>
          <a-animation attribute="scale" from="0.6 0 0.6" to="0.6 1 0.6" begin="800" dur="2000" fill="both"></a-animation>
          <a-cylinder position="0 2 0" radius="2" height="2" color="#93648D" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 40 1" to="1 0 1" begin="800" dur="2000" fill="both"></a-animation>
          </a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#93648D" open-ended="true" side="double">
            <a-animation attribute="scale" from="1 40 1" to="1 0 1" begin="800" dur="2000" fill="both"></a-animation>
          </a-cylinder>
        </a-entity>

      </a-entity>


      <a-sky color="#ECECEC"></a-sky>
      <a-light type="directional" color="#FFF" intensity="0.2" position="-1 2 1"></a-light>
      <a-light type="ambient" color="#FFF"></a-light>

    </a-scene>
  </body>
</html>
